<template>
  <!-- <div class="login" :style="'background-image:url(' + Background + ');'"> -->
  <div class="login">
    <!-- <div class="login-content">
      <div class="banner">
        <img src="../assets/images/indexlogo.png" />
      </div>

       底部 
      <div v-if="$store.state.settings.showFooter" id="el-login-footer">
        <span v-html="$store.state.settings.footerTxt" />
        <span> ⋅ </span>
        <a href="http://www.beian.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
      </div>
    </div> -->

    <div class="login-item">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px"
        class="login-form">
        <h3 class="title">
          治疗管理系统
        </h3>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" clearable>
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
            @keyup.enter.native="handleLogin" clearable>
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <!--      <el-form-item prop="code">-->
        <!--        <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">-->
        <!--          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />-->
        <!--        </el-input>-->
        <!--        <div class="login-code">-->
        <!--          <img :src="codeUrl" @click="getCode">-->
        <!--        </div>-->
        <!--      </el-form-item>-->
        <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
          记住我
        </el-checkbox>
        <el-form-item>
          <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { kke, encrypt, decrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import { getCodeImg } from '@/api/login'
import Cookies from 'js-cookie'
import Background from '@/assets/images/background.jpg'
export default {
  name: 'Login',
  data() {
    return {
      Background: Background,
      codeUrl: '',
      cookiePass: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]
        // code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && decodeURIComponent(route.query.redirect)
      },
      immediate: true
    }
  },
  created() {
    // 获取验证码
    // this.getCode()
    // 获取用户名密码等Cookie
    this.getCookie()
    // token 过期提示
    this.point()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    },
    getCookie() {
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : decrypt(password)
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        console.log(this.loginForm, "this.loginForm");

        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          up: kke(this.loginForm.username, this.loginForm.password)
          // code: this.loginForm.code,
          // uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          };

          this.$store.dispatch('Login', user).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            // this.getCode()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: '提示',
          message: '当前登录状态已过期，请重新登录！',
          type: 'warning',
          duration: 8000
        })
        Cookies.remove('point')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
  width: 100%;
  height: 100vh;
  //   background: url(../assets/images/background.jpg) no-repeat;
  background: -webkit-gradient(linear,
      left bottom,
      left top,
      color-stop(10%, #52a0e9),
      color-stop(30%, #6ba7e4),
      color-stop(60%, #cbe4fa));
  background: -webkit-linear-gradient(bottom,
      #3184d4 10%,
      #599fe5 30%,
      #cbe4fa 60%);
  background: -moz-linear-gradient(bottom,
      #3184d4 10%,
      #599fe5 30%,
      #cbe4fa 60%);
  background: -o-linear-gradient(bottom, #3184d4 10%, #599fe5 30%, #cbe4fa 60%);
  background: linear-gradient(to top, #3184d4 10%, #599fe5 30%, #cbe4fa 60%);
  display: flex;
  justify-content: center;
  align-items: center;

  .login-content {
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 1246px;
    height: 768px;
    border-radius: 15px;
    padding: 60px 80px;
    justify-content: space-between;

    .banner {
      width: 500px;
      height: 560px;
      overflow: hidden;
      display: flex;
      align-items: center;

      img {
        display: block;
        width: 100%;
        height: 400px;
      }
    }

    .login-item {
      border-radius: 15px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
      padding-top: 50px;
      width: 460px;
      height: 560px;

      .login-form {
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;

        .title {
          height: 60px;
          font-size: 30px;
          color: #3184d4;
          font-family: 华文行楷;
        }

        .el-input {
          font-size: 18px;
          width: 376px;
          height: 60px;

          .input-icon {
            height: 60px;
            width: 15px;
            margin-left: 4px;
          }

          input {
            font-size: 18px;
            width: 376px;
            height: 60px;
          }
        }

        .el-checkbox {
          font-size: 18px;
          width: 376px;
          height: 60px;
        }

        .el-button {
          font-weight: 400;
          width: 376px;
          height: 60px;
          font-size: 18px;
          color: #fcfefe;
          line-height: 26px;
          letter-spacing: 5px;
          outline: none;
          border: none;
          border-radius: 4px;
          background-color: #3184d4;
        }

        .el-button:hover {
          background-color: #6caae8;
        }
      }
    }
  }

  .login-item {
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    padding: 50px 0;
    width: 460px;
    // height: 560px;
    background: #FFF;

    .login-form {
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;

      .title {
        height: 60px;
        font-size: 30px;
        color: #3184d4;
        font-family: 华文行楷;
      }

      .el-input {
        font-size: 18px;
        width: 376px;
        height: 60px;

        .input-icon {
          height: 60px;
          width: 15px;
          margin-left: 4px;
        }

        input {
          font-size: 18px;
          width: 376px;
          height: 60px;
        }
      }

      .el-checkbox {
        font-size: 18px;
        width: 376px;
        height: 60px;
      }

      .el-button {
        font-weight: 400;
        width: 376px;
        height: 60px;
        font-size: 18px;
        color: #fcfefe;
        line-height: 26px;
        letter-spacing: 5px;
        outline: none;
        border: none;
        border-radius: 4px;
        background-color: #3184d4;
      }

      .el-button:hover {
        background-color: #6caae8;
      }
    }
  }
}

// .login {
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     height: 100%;
//     background-size: cover;
// }

// .title {
//     margin: 0 auto 30px auto;
//     text-align: center;
//     color: #707070;
// }

// .login-form {
//     border-radius: 6px;
//     background: #ffffff;
//     width: 385px;
//     padding: 25px 25px 5px 25px;

//     .el-input {
//         height: 38px;

//         input {
//             height: 38px;
//         }
//     }

//     .input-icon {
//         height: 39px;
//         width: 14px;
//         margin-left: 2px;
//     }
// }

// .login-tip {
//     font-size: 13px;
//     text-align: center;
//     color: #bfbfbf;
// }

// .login-code {
//     width: 33%;
//     display: inline-block;
//     height: 38px;
//     float: right;

//     img {
//         cursor: pointer;
//         vertical-align: middle
//     }
// }</style>
